<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamic Process Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="300"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '24px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Draw Left Box (Initial State) ---
        const box1_x = 40;
        const box1_y = 50;
        const box_width = 220;
        const box_height = 120;
        ctx.strokeRect(box1_x, box1_y, box_width, box_height);

        // Text in Left Box
        const text1_x = box1_x + box_width / 2;
        ctx.fillText('2.40 \u00D7 10\u00B3 cm\u00B3', text1_x, box1_y + 30);
        ctx.fillText('3.51 \u00D7 10\u2075 Pa', text1_x, box1_y + 65);
        ctx.fillText('290 K', text1_x, box1_y + 100);

        // --- Draw Right Box (Final State) ---
        const box2_x = 340;
        const box2_y = 50;
        ctx.strokeRect(box2_x, box2_y, box_width, box_height);

        // Text in Right Box
        const text2_x = box2_x + box_width / 2;
        ctx.fillText('2.40 \u00D7 10\u00B3 cm\u00B3', text2_x, box2_y + 30);
        ctx.fillText('3.75 \u00D7 10\u2075 Pa', text2_x, box2_y + 65);
        ctx.fillText('310 K', text2_x, box2_y + 100);

        // --- Draw Arrow ---
        const arrow_y = box1_y + box_height / 2 + 10;
        const arrow_start_x = box1_x + box_width;
        const arrow_end_x = box2_x;
        
        ctx.beginPath();
        ctx.moveTo(arrow_start_x, arrow_y);
        ctx.lineTo(arrow_end_x, arrow_y);
        // Arrowhead
        ctx.moveTo(arrow_end_x, arrow_y);
        ctx.lineTo(arrow_end_x - 12, arrow_y - 6);
        ctx.moveTo(arrow_end_x, arrow_y);
        ctx.lineTo(arrow_end_x - 12, arrow_y + 6);
        ctx.stroke();

        // --- Draw Figure Caption ---
        ctx.font = 'bold 24px sans-serif';
        const caption_y = box1_y + box_height + 60;
        const caption_x = (box1_x + box2_x + box_width) / 2;
        ctx.fillText('Fig. 2.1', caption_x, caption_y);

    </script>
</body>
</html>